<style>
.background-image {
    display:inline-block;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url(../images/placeholder.png);
}
</style>


<template>
<div class="background-image" :style="style" @click=handleClick>
    <slot></slot>
</div>
</template>
<script lang="ts">
    export default {
        props: {
            value: {
                type: String,
                default: ""
            },
            width: {
                type: Number,
                default: 0
            },
            height: {
                type: Number,
                default: 0
            },
        },
        data () {
            return {
            }
        },
        computed: {
            style() {
                var result = {};
                if(this.value) result['background-image'] = `url(${this.value})`;
                if(this.width) result['width'] = `${this.width}px`;
                if(this.height) result['height'] = `${this.height}px`;
                return result;
            }
        },
        methods: {
            handleClick() {
                this.$emit('click');
            }
        }
    }
</script>
